<!-- 检测项目管理 -->
<template>
  <div>
    <div class="searchbox">
      <el-form :inline="true" size="small" label-width="100px">
        <jt-easy-collapse :has-expand="true">
          <template slot="expand">
                        <el-form-item label="检测类型">
                          <el-select v-model="form.testType" filterable placeholder="请选择" style="width: 200px;">
                          <el-option  :label="all" :value="''"></el-option>
                          <el-option v-for="item in typeList" :key="item.code" :label="item.name" :value="item.code">
                           </el-option>
                    </el-select>
                          <!-- <el-input size="small" v-model="form.testType" placeholder="检测类型"></el-input> -->
                        </el-form-item>
                        <el-form-item label="检测项目">
                          <el-input size="small" v-model="form.fieldName" placeholder="检测项目"></el-input>
                        </el-form-item>
                        <el-form-item style="margin-left: 20px;">
                          <el-button size="mini" type="primary" @click="showList">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                          <el-button size="mini" @click='clearForm'>清除</el-button>
                        </el-form-item>
</template>
        </jt-easy-collapse>
      </el-form>
    </div>
    <div class="contentbox">
      <div style="float: left;padding-left: 20px;font-size: 15px;color: #666;padding-top: 6px;">
        检测项目信息 共 <span style="color: red;">{{pageTotal}}</span> 条数据
      </div>
      <el-row style="float: right;margin-right: 20px;margin-bottom: 15px;" type="flex" justify="end">
        <el-col>
          <jt-table-column-filter tableName='inspectionProject' :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
          <el-button size="small" type="primary" @click="addTestName">新增检测名称</el-button>
          <el-button size="small" type="primary" @click="getExcel">导出清单</el-button>
          <el-button size="small" type="primary" @click="addTestType">新增检测类型</el-button>
          <!-- <el-button size="small" type="primary" @click="deleteBatch">批量删除</el-button> -->
        </el-col>
      </el-row>
      <test-name :show.sync="isShowAddName" :modifyId.sync="modifyId"  @refreshAdd="showList"></test-name>
      <!-- <test-name-modify :show.sync="isShowAddNameModify" :modifyId="modifyId"></test-name-modify> -->
      <test-type :show.sync="isShowAddType"></test-type>
      <!-- 表格 -->
      <el-table :data="tableData" :key='tableKey' v-loading="loading" @selection-change="handleSelectionChange" border stripe>
        <el-table-column type="selection" width="50" align="center" :resizable="false"></el-table-column>
        <!-- <el-table-column :index="indexMethod" type="index" label="序号" width="50" align="center" :resizable="false"></el-table-column> -->
        <el-table-column align="center" :key='item' v-for='item in filterColumnData' :resizable="false"
            :label="getTableHeaderLabel(item)"
            :prop="item"
            :min-width="getTableColumnWidth(item)"
            :fixed="getTableColumnFixed(item)"
            :sortable="getTableColumnSort(item)">
<template slot-scope="scope">
   {{scope.row[item]}}
  <el-button v-if="item === 'operate'" size="small" type="text" @click="modifyOrder(scope.row)">修改</el-button>
  <!-- <el-button v-if="item === 'operate'" size="small" type="text" @click="deleteTestField(scope.row)">删除</el-button> -->
</template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArr"
          :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
  import JtTableColumnFilter from "components/jt-table-column-filter/index"; // 导入表格列筛选组件
  import JtEasyCollapse from "components/jt-easy-collapse/index";
  import TestName from "dialog/resource-management/inspection-project-management/test-name";
  import TestNameModify from "dialog/resource-management/inspection-project-management/test-name-modify";
  import TestType from "dialog/resource-management/inspection-project-management/test-type";
  import {
    getTestFieldList,
    getTypeList,
    testFieldDelete,
    testFieldAllDelete,
    getExcelList
  } from "service/task";
  import {
    getLableFromList
  } from "utils/common";
  export default {
    name: "RemindingCenter",
    components: {
      "jt-table-column-filter": JtTableColumnFilter,
      "jt-easy-collapse": JtEasyCollapse,
      "test-name": TestName,
      "test-name-modify": TestNameModify,
      "test-type": TestType
    },
    data() {
      return {
        tableKey: 1, // table key
        filterColumnData: [],
        typeList: [],
        selectList: [],
        selectCount: 0,
        all:'全部',
        tableHeaderArr: [{
            name: "num",
            alias: "序号",
            default: true,
            width: 110,
            fixed: false,
            sort: true
          },
          {
            name: "testTypeStr",
            alias: "分类",
            default: true,
            width: 110,
            fixed: false,
            sort: true
          },
          {
            name: "fieldName",
            alias: "检测项目",
            default: true,
            width: 170,
            fixed: false,
            sort: true
          },

          {
            name: "standard",
            alias: "检测标准",
            default: true,
            width: 170,
            fixed: false,
            sort: true
          },
           {
              'name': 'occupy',
              'alias': '占用设备时间（分钟）',
              'default': true,
              'width': 230,
              'fixed': false,
              'sort': true
          },
          // {
          //     'name': 'standradName',
          //     'alias': '标尺/技术要求',
          //     'default': true,
          //     'width': 230,
          //     'fixed': false,
          //     'sort': true
          // },
          // {
          //     'name': 'projectcode0',
          //     'alias': '数值范围',
          //     'default': true,
          //     'width': 230,
          //     'fixed': false,
          //     'sort': true
          // },
          // {
          //     'name': 'unit',
          //     'alias': '单位',
          //     'default': true,
          //     'width': 230,
          //     'fixed': false,
          //     'sort': true
          // },
          // {
          //     'name': 'projectcode2',
          //     'alias': '对应检测设备',
          //     'default': true,
          //     'width': 230,
          //     'fixed': false,
          //     'sort': true
          // },
          {
            name: "remark",
            alias: "备注",
            default: true,
            width: 230,
            fixed: false,
            sort: true
          },
          {
            name: "operate",
            alias: "操作",
            default: true,
            width: 190,
            fixed: "right",
            sort: false
          }
        ],
        tableData: [],
        loading: false,
        form: {
          testType: "",
          fieldName: ""
        },
        currentPage: 1,
        pageSizeArr: [10, 20, 50, 100],
        pageSize: 10,
        pageTotal: 10,
        isShowAddName: false, // 新增检测名称
        isShowAddNameModify: false, // 修改检测名称
        isShowAddType: false, // 新增检测类型
        modifyId: null
      };
    },
    mounted() {
      getTypeList().then(res => {
        this.typeList = res.data.result;
        this.showList();
      });

    },
    methods: {
        clearForm() {
      this.form = {};
      this.showList();
    },
      getExcel() {
        window.location.href= `${process.env.API_URL}` + "testField/getTestFieldExcel?testType=" + this.form.testType + "&fieldName=" + this.form.fieldName;
      },
       indexMethod(index) {
        return index + this.pageSize * (this.currentPage-1) + 1;
      },
      deleteTestField(row) {
          let confirm = this.$confirm('您确定删除吗?','提示',{
          // confirmButtonText: '确定',
          // cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
         testFieldDelete(row.id).then(res => {
        if (res.data.success) {
         this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000
            });
          this.showList();
        }
      });
      }).catch(res => {
         return
     });
    },
    deleteBatch() {
if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要删除的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function(e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          testFieldAllDelete({ids: ids.split(",")}).then(res => {
            if (res.data.success === true) {
              this.$Message.success("删除成功");
               this.showList();
            }
          });
        }
      });
    },
      // 新增检测名称
      addTestName() {
        this.modifyId=null;
        this.isShowAddName = true;
      },
      // 新增检测类型
      addTestType() {
        this.isShowAddType = true;
      },
      // 修改检测名称
      modifyOrder(row) {
        this.modifyId = row.id;
        this.isShowAddName = true;
      },
      // 获取表格多选的值
      handleSelectionChange(val) {
        this.selectList = val;
        this.selectCount = val.length;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.showList();
      },
      handleCurrentChange(val) {
        this.pageNumber = val;
        this.currentPage = val;
        this.showList();
      },
      // 表格数据展示
      showList() {
        this.loading = true;

        getTestFieldList({
          // this.axios.get('/system/testFieldList', {
          testType: this.form.testType,
          fieldName: this.form.fieldName,
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          sort: "num",
          order: "asc"
        }).then(res => {
          this.tableData = res.data.result.content;
          //this.currentPage = res.data.result.pageable.pageNumber;
          this.pageSize = res.data.result.pageable.pageSize;
          this.pageTotal = res.data.result.totalElements;
          this.loading = false;
          if (this.tableData) {
            let that = this;
            this.tableData.forEach(function(d) {
              console.log(that.typeList);
              d.testTypeStr = getLableFromList(that.typeList, d.testType);
            });
            console.log(this.tableData);
          }
        });
      },
      // 表头展示
      getTableHeaderLabel(str) {
        return this.getTableSomeValue(str, "alias");
      },
      // 获取表格列的宽度
      getTableColumnWidth(str) {
        return this.getTableSomeValue(str, "width");
      },
      // 获取表格列是否是固定的
      getTableColumnFixed(str) {
        return this.getTableSomeValue(str, "fixed");
      },
      // 获取表格列是否排序
      getTableColumnSort(str) {
        return this.getTableSomeValue(str, "sort");
      },
      // 获取表格表头，列宽度，列固定，列排序的值
      getTableSomeValue(str, keyName) {
        for (var value of this.tableHeaderArr) {
          if (value["name"] == str) {
            return value[keyName];
          }
        }
      }
    }
  };
</script>
